<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style type="text/css">
    input.ng-invalid.ng-dirty {
        background-color: yellow;
    }
</style>
<script src="../../lib/angularjs/angular.min.js"></script>
</head>
<body  ng-app="myApp">
<form name="editForm">
    <h2>oneToTen</h2>
    <input type="text" ng-model="age" one-to-ten="" name="age">
    <span ng-show="editForm.age.$error.oneToTen">请输入1-10之前的数值！</span>{{editForm.age.$error.oneToTen}}{{editForm.age.$error}}
    <h2>mutipleEmail</h2>
    <input mutiple-email="" name="emails" ng-model="emails" />
    {{editForm.emails.$error}}---{{editForm.emails.$error.mutipleEmail}}</span><b>验证通过</b>：{{editForm.emails.$valid}}
    <h2>ngTest</h2>
    <input type="text" name="inputs" ng-test ng-model="number">
    <span ng-show="editForm.inputs.$error.test">good</span>
    <span ng-hide="editForm.inputs.$error.test">bad</span>
    <div>{{ editForm.inputs.$valid }}</div>
    <div>{{ editForm.inputs.$invalid }}</div>
</form>
<script>
    (function () {
        angular.module('myApp',[]).directive('oneToTen',oneToTen).directive('mutipleEmail',mutipleEmail).directive('ngTest', ngTest) ;
        function oneToTen(){
            return{
                require : '?ngModel',
                link : function(scope,ele,attrs,ngModel){
                    if(!ngModel){
                        return ;
                    }
                    ngModel.$parsers.unshift(function(viewValue){
                        var i = parseInt(viewValue) ;
                        if(i >= 0 && i < 10){
                            ngModel.$setValidity('oneToTen',true) ; //这里的oneToTen对应错误的属性，类似$error.required、$error.email中的required,email属性
                            return viewValue ;
                        }else{
                            ngModel.$setValidity('oneToTen',false) ;
                            return undefined ;
                        }
                    }) ;
                }
            } ;
        }
        function mutipleEmail() {
            return {
                require: "ngModel",
                link: function (scope, element, attr, ngModel) {
                    if (!ngModel) return;
                    var emailsRegexp = /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i;
                    var customValidator = function (value) {
                        var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
                        ngModel.$setValidity("multipleEmail", validity);
                        return validity ? value : undefined;
                    };
                    ngModel.$formatters.push(customValidator);
                    ngModel.$parsers.push(customValidator);
                }
            };
        }
        function ngTest() {
            return {
                require: '?ngModel',
                restrict: 'AE',
                link: function ($scope, iElm, iAttrs, ngModel) {
                    if (!ngModel) return;
                    ngModel.$parsers.push(function (viewValue) {
                        var num = parseInt(viewValue);
                        if (num >= 0 && num < 99) {
                            ngModel.$setValidity('test', true);
                            return viewValue;
                        } else {
                            ngModel.$setValidity('test', false);
                            return undefined;
                        }
                    });
                }
            };
        }
    }());
</script>
</body>
</html>